<template>
  <div class="vue-container">
    <common-form
      ref="commonForm"
      :disabled="disabled"
      :options="options"
      @handlerClick="handlerClick"
      @advancedSearch="getList"
    >
      <template slot="advanced-content">
        <el-form ref="advancedForm" style="margin-top: 20px;" :model="queryForm" label-width="80px">
          <el-form-item label="字典键">
            <el-input v-model="queryForm.code" clearable />
          </el-form-item>
          <el-form-item label="字典标签">
            <el-input v-model="queryForm.label" clearable />
          </el-form-item>
          <el-form-item label="字典状态">
            <el-select v-model="queryForm.status" style="width: 100%;" clearable placeholder="请选择字典状态">
              <el-option v-for="(item, index) in statusList" :key="index" :value="item.code" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </common-form>
    <common-table
      :table-data="data"
      :columns="columns"
      :height="height"
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :total="totalPage"
      :loading="loading"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
    >
      <!-- 列表序号 -->
      <template #serialNumber="scope">
        <span>{{
          Number(scope.index + 1) + (queryForm.pageNum - 1) * queryForm.pageSize
        }}</span>
      </template>
      <!-- 字典状态 -->
      <template #status="scope">
        <el-popconfirm
          v-permission="{ permission: 'system:data:dict:update', disabled }"
          :title="scope.row.status === 1 ? '确定要禁用该字典吗？' : '确定要启用该字典吗？'"
          icon=""
          @confirm="popConfirm(scope.row)"
        >
          <el-switch
            slot="reference"
            v-model="scope.row.status"
            v-permission="{ permission: 'system:data:dict:update', disabled }"
            :active-value="1"
            :inactive-value="2"
            @change="switchChange($event, scope.row)"
          />
        </el-popconfirm>
      </template>
      <!-- 列表操作按钮 -->
      <template #operation="scope">
        <el-button
          v-throttle
          v-permission="'system:data:dict:update'"
          :size="size"
          type="text"
          icon="el-icon-edit-outline"
          @click.stop="handlerSave(scope.row)"
        >编辑</el-button>
        <el-button
          v-throttle
          v-permission="'system:data:dict:del'"
          :size="size"
          type="text"
          icon="el-icon-delete"
          class="danger-btn"
          @click.stop="handlerDel(null, scope.row)"
        >删除</el-button>
      </template>
    </common-table>
    <!-- 新增or编辑组件 -->
    <add-or-update ref="addOrUpdate" :obj="{ statusList }" @ok="getList" />
    <!-- 全局导入组件 -->
    <to-channel ref="toChannel" :params="{ domainId: this.$route.query.domainId }" title="数据字典导入" @change="getList" />
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin'
import { list, edit, del, batchDel, exports } from '@/api/system/data-dict'
import AddOrUpdate from './components/save'
export default {
  name: 'DataDict',
  components: {
    AddOrUpdate
  },
  mixins: [mixin],
  data() {
    return {
      // 字典状态数组
      statusList: [],
      // 表头数组
      columns: [
        {
          type: 'selection',
          width: '60'
        },
        {
          prop: 'number',
          label: '序号',
          width: '70',
          type: 'slot',
          slotType: 'serialNumber'
        },
        {
          prop: 'code',
          label: '字典键'
        },
        {
          prop: 'label',
          label: '字典标签'
        },
        {
          prop: 'sort',
          label: '排序'
        },
        {
          type: 'slot',
          slotType: 'status',
          label: '字典状态'
        },
        {
          prop: 'remarks',
          label: '备注'
        },
        {
          type: 'slot',
          prop: 'operation',
          label: '操作',
          width: '168',
          slotType: 'operation',
          fixed: 'right'
        }
      ]
    }
  },
  async created() {
    this.statusList = await this.getDictInfo('dict_status')
  },
  methods: {
    // 获取列表数据
    getList() {
      this.loading = true
      const queryForm = { ...this.queryForm, ... { domainId: this.$route.query.domainId }}
      list(queryForm).then((res) => {
        this.data = res.data.records
        this.totalPage = res.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    // 多选删除
    handlerDels() {
      this.handlerDel(batchDel)
    },
    // 删除
    handlerDel(delFuns, item) {
      if (!delFuns) {
        delFuns = del
      }
      const id = item ? item.id : this.ids
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        delFuns(id).then(() => {
          this.$message({ type: 'success', message: '删除成功!' })
          this.getList(item)
          if (this.ids.length) this.disabled = false
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {})
    },
    // 导出
    handlerExport() {
      this.loading = true
      const queryForm = { ...this.queryForm, ... { domainId: this.$route.query.domainId }}
      exports(queryForm).then(res => {
        this.$download(res.data, '数据字典信息列表.xlsx')
        this.$message({ type: 'success', message: '导出成功!' })
      }).finally(() => {
        this.loading = false
      })
    },
    // 状态切换触发
    switchChange(e, form) {
      form.status = e === 1 ? 2 : 1
    },
    // 确认禁用或启用
    popConfirm(form) {
      this.loading = true
      form.status = form.status === 1 ? 2 : 1
      edit(form).then(() => {
        if (form.status === 1) {
          this.$message.success('字典已启用')
        } else {
          this.$message.error('字典已禁用')
        }
      }).catch(e => {
        form.status = form.status === 1 ? 2 : 1
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
